<template>
  <div class="detail">
  

      
    <div class="info" >
       <div class="info1">
           <img src="imgs/detail/d1.png"  >

           <div class="info2">
          
                <!-- 使用query路由传参 -->
                 <h4 @click="fun()">{{this.$route.query.newtitle}} </h4> 
                
          
            <!-- <h4>{{this.$route.params.title}} </h4>  -->
            <!-- <h4>{{this.$store.state.data.listarr[0].title}} </h4>  -->
             <p>￥68-108</p>
             <!-- <p>{{this.$store.state.data.listarr[0].price}}</p> -->
           </div>
       </div>
       <div class="time">
         <div class="time1">
           <h5>2021.10.21-10.31</h5>
           <!-- <h5>{{this.$store.state.data.listarr[0].time}}</h5> -->
      <p>约90分钟（以现场为主）</p>
         </div>
         <div class="time2">&gt;</div>

       </div>
       <div class="city">
         <div class="city1">
         <h5>西安市|玩笑喜剧 悦基剧场</h5>
         <p>西安市新城区解放路166号悦荟广场四楼</p>
         </div>
         <div class="city2">
            <span class="iconfont icon-ditu"></span>
            <p>地图</p>
         </div>
       </div>
       <div class="serve">
         <div class="serve1">
            <p>服务&nbsp;&nbsp;不支持退&nbsp;&nbsp;可选作&nbsp;&nbsp;电子票&nbsp;&nbsp;纸质发票</p>
         </div>
        
        <div class="serve2">&gt;</div>
       </div>
    </div>
  

       <div class="pingfen">
      <img src="imgs/detail/d2.png">
       </div>
       <div class="tishi">
         <h5>温馨提示</h5>
         <p>您知悉，因各地疫情情况，演出地域根据您所在地区防疫防空政策可能因此昂到您的正常观看；您知悉，因各地疫情情况，演出地域根据您所在地区防疫防空政策可能因此昂到您的正常观看；</p>
       </div>
       <div class="wenzi">
         <ul>
           <li>详情</li>
           <li>评价</li>
           <li>须知</li>
           <li>推荐</li>
         </ul>
         <div class="yanchu">
           <img src="imgs/detail/d3.png"  >
           <img src="imgs/detail/d4.png"  >
           <div class="yanchu1">
             <p>展开更多</p>
           </div>
         </div>
         <div class="review">
           <h4>观众热议（199）</h4>
           <div class="review1">
             <img src="imgs/detail/d6.png" >
           </div>
           <p>全部166条评价</p>
         </div>
         <div class="buyticket">
           <div class="buyticket1">
             <img src="imgs/detail/d7.png" >
           </div>
            <div class="buyticket2">
              <img src="imgs/detail/d8.png" >
            </div>
         </div>
       </div>
       <div class="tuijian">
         <h3>为你推荐</h3>
       </div>
       <div class="footer">
         <div class="left">
           <ul>
             <li>
               <span class="iconfont icon-shouye"></span>
               <p>大麦首页</p>
             </li>
             <li>
               <span class="iconfont icon-xianchang"></span>
               <p>924人想看</p>
             </li>
             <li>
               <span class="iconfont icon-gerenpiaojia"></span>
               <p>我的订单</p>
             </li>
           </ul>
         </div>
         <div class="right">
            <p>选座购买</p>
         </div>
       </div>
    </div>
</template>

<script>
export default {
methods: {
  fun(){
     this.$router.push({name:'Dt',params:{dtitle:'【西安】玩笑喜剧精品脱口秀现场'}})
  }
},
}
</script>

<style scoped>
  .detail{
    font-size: 0.2rem;
  }
  .detail .info{
    width: 100%;
    height: 3.5rem;
    /* background-color:green; */
  }
  .detail .info .info1{
    width: 100%;
    height: 2rem;
    padding-top: 0.2rem;
    box-sizing: border-box;
    display: flex;
    padding-left: 0.2rem;
  }
  .detail .info .info1 img{
    width: 2rem;
  }
   .detail .info .info1 .info2{
     margin-left: 0.2rem;
   }
  .detail .info .info1 .info2 h4{
    font-weight: normal;
    margin-bottom: 1rem;
  }
  .detail .info .info1 .info2 p{
    color: pink;
  }
  .detail .info .time{
    width: 100%;
    height: 0.4rem;
    margin-left: 0.2rem;
  }
  .detail .info .time .time1{
    float: left;
  }
  .detail .info .time .time2{
    float: right;
    margin-right: 0.1rem;
  }
  .detail .info .time p{
     font-size: 0.15rem;
     color: gray;
     margin-top: 0.02rem;
  }
  .detail .info .time .time2{
    font-size: 0.15rem;
    color: gray;
  }
  .detail .info .city{
    margin-top: 0.2rem;
     height: 0.4rem;
     margin-left: 0.2rem;
  }
  .detail .info .city p{
     font-size: 0.15rem;
     color: gray;
     margin-top: 0.02rem;
  }
   .detail .info .city .city1{
      float: left;
   }
   .detail .info .city .city2{
    float: right;
    margin-right: 0.1rem;
  }
  .detail .serve{
    margin-top: 0.2rem;
    border-top: 0.01rem solid gray;
    font-size: 0.15rem;
    margin-left: 0.2rem;
    display: flex;
    justify-content: space-between;
  }
  .detail .serve .serve2{
    margin-right: 0.2rem;
  }
   .detail .pingfen{
     width: 100%;
     height: 1.6rem;
     background-color:gray;
   }
    .detail .pingfen img{
      width: 100%;
      padding-top:0.1rem;
      padding-bottom: 0.1rem;
   
      box-sizing: border-box;
    }
    .detail .tishi{
      width: 100%;
      height: 1.5rem;
      padding: 0 0.2rem;
      box-sizing: border-box;
     
    }
    .detail .tishi p{
      color: gray;
      font-size: 0.15rem;
      margin-top: 0.15rem;
    }
    .detail .wenzi{
      width: 100%;
      height: 20rem;
    }
    .detail .wenzi ul{
      width: 90%;
      display: flex;
      justify-content:space-around;
    }
    .detail .wenzi ul li{
      list-style: none;
      font-weight: bold;
    }
    .detail .yanchu{
      width: 100%;
      height: 9rem;
    }
    .detail .yanchu img{
      margin-left: 0.2rem;
    }
    .detail .wenzi .yanchu .yanchu1 p{
      color: skyblue;
      font-size: 0.15rem;
      text-align: center;
      width: 100%;
      height: 0.5rem;
    }
      .detail .review{
        width: 100%;
        height: 4rem;
        font-size: 0.2rem;
      }
      .detail .review .review1{
        width: 100%;
        height: 4rem;
      }
      .detail .review .review1 img{
        margin-left: 0.06rem;
      }
       .detail .review p{
         color: skyblue;
         text-align: center;
         font-size: 0.15rem;
         width: 100%;
         height: 0.5rem;
   
         line-height: 0.5rem;
         border-bottom: 0.02rem solid gray;
       }
        .detail .buyticket{
          width: 100%;
          height: 2rem;
        
          margin-top: 0.8rem
          ;
        }
        .detail .buyticket .buyticket1{
          margin-left: 0.1rem;
        }
         .detail .buyticket .buyticket2{
          margin-left: 0.1rem;
        }
        .detail .tuijian{
          font-size: 0.2rem;
          width: 100%;
          height: 0.5rem;
          padding-bottom: 0.5rem;
        }
        .detail .footer{
          width: 100%;
          height: 0.5rem;
          display: flex;
          background-color:white;
          position: fixed;
          bottom:0;
      
        }
        .detail .footer .left{
          width: 54%;
          height: 0.5rem;
          font-size: 0.15rem;
        }
        .detail .footer .left ul{
          display: flex;
          height: 0.5rem;
          align-items: center; 
        }
         .detail .footer .left ul li:nth-child(3){
           border-right:none
         }
         .detail .footer .left ul li{
           list-style: none;
           border-right:0.01rem solid gray;
           text-align: center;
           margin-right: 0.04rem;
           
         }
         .detail .footer .right{
           width: 40%;
           height: 0.5rem;
           line-height: 0.5rem;
           font-size: 0.2rem;
         }
         .detail .footer .right p{
           width: 100%;
           height: 0.5rem;
           background-color: deeppink;
           text-align: center;
           border-radius: 0.5rem;
           color: white;
         }
</style>